<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>练习HTML</title>


    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style type="text/css">
        /*
        注释快捷键：Ctrl+Shift+C
        样式：就近原则
        标签内部样式>外部样式=id选择器>class选择器
        选择器用法如下:
        1、id选择器用#
        2、class选择器用.
        3、并集选择器用,
        4、后代选择器用空格

        一个标签内部多个class之间用空格隔开


          */

        div {
            border: 3px solid red;
            margin-bottom: 20px;
        }

        #baseDiv, #tableDiv, #formDiv {
            padding-left: 50px;
        }

        #tableDiv table, td {
            border: 1px solid green;
            text-align: center;
        }

        #tableDiv table th {
            font-size: 20px;
            border: 1px solid green;
            text-align: center;
        }


        .div {
            font-size: 10px;
        }

        .divColor {
            background-color: green;

        }

        .divBorder {
            border: 3px solid red;
        }

        .input-group {
            margin-right: 1000px;
        }

    </style>


</head>
<body>
<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>


<div id="baseDiv" class="div divColor divBorder">
    <span style="text-align: center;"><h3>Html常用标签</h3></span>

    <img alt="这是一个图片" title="img" src=".\imgs\1.png">

    <br>

    <!-- 注释：target属性表示目标，默认为当前页 -->
    <a href="http://www.baidu.com" target="_blank">链接到其他地方</a>

    <h1>标题一共六级选,</h1>
    <h2>文字加粗一行显。</h2>
    <h3>由大到小依次减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>

    <p><em> 我是一个段落标签</em></p>
    <p>
        其实很多家长都有发现，学校经常会以各种理由向同学们收取费用，一般情况下家长也不会过多的询问，毕竟是关系到孩子的学习，但是这次的“树叶费”家长就不是很理解了。其实很多家长都有发现，学校经常会以各种理由向同学们收取费用，一般情况下家长也不会过多的询问，毕竟是关系到孩子的学习，但是这次的“树叶费”家长就不是很理解了。其实很多家长都有发现，学校经常会以各种理由向同学们收取费用，一般情况下家长也不会过多的询问，毕竟是关系到孩子的学习，但是这次的“树叶费”家长就不是很理解了。</p>
    <p>
        <ins>我是一个段落标签</ins>
    </p>

</div>


<div id="tableDiv" class="div">
    <span style="text-align: center;"> <h3>Table表格属性</h3></span>
    <!--
        colspan:表示向右合并多少列。
        rowspan:表示向下合并多少行。
     -->
    <table>
        <tr style="">
            <th>姓名</th>
            <th>年龄</th>
            <th colspan="2" bgcolor="green" style="color: white;">操作</th>
        </tr>

        <tr>
            <td bgcolor="red">张三</td>
            <td>18</td>
            <td colspan="2"><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a>
            </td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20</td>
            <td>男</td>
            <td rowspan="2" style="text-align: center;"><a href="">删除</a></td>
        </tr>
        <tr>
            <td>王五</td>
            <td>22</td>
            <td>男</td>
        </tr>
    </table>
</div>


<!-- 表单控件 -->
<div id="formDiv" class="">
    <span style="text-align: center;"> <h3>Form表单属性</h3></span>

    <!-- form属性 - action:提交到的后端接口地址，不要以斜杠开头。-->
    <!-- form属性 - method:提交方式七种。GET/POST/PUT/DELETE/...，一般建议POST即可。-->
    <form action="" method="post">
        <!-- input标签根据type的不同而变现出不同的样式或功能 -->
        文本框text：<input type="text" name="account"/><br/>

        密码框password：<input type="password" name="pwd"/><br/>

        日期date：<input type="date"/><br/>

        复选框checkbox：
        1<input type="checkbox" name="checkbox" value="1"/>
        2 <input type="checkbox" name="checkbox" value="2" checked="checked"/>
        3<input type="checkbox" name="checkbox" value="3"/><br/>

        单选框radio：
        1<input type="radio" name="radio" value="1"/>
        2<input type="radio" name="radio" value="2" checked="checked"/>
        3<input type="radio" name="radio" value="3"/><br/>

        文件file：<input type="file" name=""/><br/>

        <input id="hiddenId" type="hidden" value="隐藏的hidden"/><br/>


        下拉框select：<select name="select">
        <option value="bj">北京</option>
        <option value="上海">上海</option>
        <option value="sz" selected="selected">深圳</option>
    </select><br/><br/>
        文本域textarea：<br/> <textarea rows="5" cols="100"></textarea><br/>

        按钮button：<input type="button" value="我是按钮" onclick="alert('你单机了一次按钮')"/><br/>

        提交submit：<input type="submit" value="提交按钮"/><br/>

        重置reset：<input type="reset" value="重置按钮"/><br/>

    </form>
</div>


</body>
</html>